<script setup>
import { computed } from 'vue';
import router from '@/router/index.js';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { picState, saveFile, SerialNumClassName } from '../api/use-task.js';
import { switchable } from '../api/use-pic-switch.js';
import { taskInfo } from '../common.js';
import JudgeModal from '../components/judge-modal.vue';
import { confirmModalProps, handleReject, judge, judgeModalProps, useJudgeModal } from '../api/use-judge.js';
import { UserOpGte } from '../op-perms.js';
import { Modal } from 'ant-design-vue';

function passAll() {
  confirmModalProps.value.visible = true;
  Modal.confirm({
    content: '确定要整包通过吗？',
    onOk: () => judge({ wholePackagePass: true, remark: '' }),
    onCancel: () => confirmModalProps.value.visible = false,
  });
}

function handleBack() {
  saveFile(picState.value.curr)
  .then(() => {
    router.push({ path: '/task-detail', query: { id: taskInfo.value.id } });
  });
}

const inputValueToInt = R.pipe(R.path(['target', 'value']), Number.parseInt);
const calcIndex = computed(() => R.pipe(inputValueToInt, R.clamp(1, picState.value.list.length), R.dec));
</script>

<template>
  <header>
    <div class="top-left">
      <button class="back-btn" type="button" title="返回任务列表" @click="() => handleBack()">
        <svg t="1687154350426" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1685" width="20" height="20"><path d="M533.353412 682.285176c0-0.030118 0.060235-0.060235 0.060235-0.090353C533.172706 682.194824 533.142588 682.224941 533.353412 682.285176zM40.176941 555.008l314.398118 314.398118c27.045647 27.045647 70.927059 27.045647 97.942588 0 27.045647-26.985412 27.045647-70.866824 0-97.912471l-196.186353-196.216471 665.630118 0c38.249412 0 69.240471-31.021176 69.240471-69.240471 0-38.279529-31.021176-69.270588-69.240471-69.270588L256.361412 436.766118l196.186353-196.186353c27.045647-27.015529 27.045647-70.927059 0-97.942588C439.024941 129.114353 421.285647 122.337882 403.546353 122.337882c-17.709176 0-35.448471 6.776471-48.941176 20.299294L40.176941 457.065412C13.101176 484.111059 13.101176 527.932235 40.176941 555.008z" p-id="1686"></path></svg>
      </button>
  
      <template v-if="UserOpGte('标注')">
        <button class="save-btn" type="button" v-exist:task="'保存'" title="保存" @click="() => saveFile(picState.curr)">
          <svg t="1686127464560" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8070" width="24" height="24"><path d="M725.4 105.7H151.8c-27.1 0-49.2 22-49.2 49.1v711.8c0 27.1 22.1 49.1 49.2 49.1H866c27.1 0 49.2-22 49.2-49.1V294.8L725.4 105.7z m-399.4 40h338.8v241.9c0 12.9-10.5 23.3-23.5 23.3H349.5c-12.9 0-23.5-10.5-23.5-23.3V145.7z m5.4 727.6V612.5c0-4.1 3.4-7.4 7.5-7.4h363.4c4.1 0 7.5 3.3 7.5 7.4v260.8H331.4z m543.8-6.8c0 4.9-4.2 9.1-9.2 9.1H749.9V612.5c0-26.1-21.3-47.4-47.5-47.4H339c-26.2 0-47.5 21.3-47.5 47.4v263.2H151.8c-5 0-9.2-4.2-9.2-9.1V154.8c0-4.9 4.2-9.1 9.2-9.1H286v241.9c0 34.9 28.5 63.3 63.5 63.3h291.8c35 0 63.5-28.4 63.5-63.3V145.7h4l166.4 165.8v555z" p-id="8071"></path><path d="M638.4 664H400.8c-11 0-20 9-20 20s9 20 20 20h237.6c11 0 20-9 20-20s-8.9-20-20-20zM638.4 765.1H400.8c-11 0-20 9-20 20s9 20 20 20h237.6c11 0 20-9 20-20s-8.9-20-20-20z" p-id="8072"></path></svg>
        </button>
      </template>
    </div>

    <div class="serial-num">
      <button type="button" :disabled="!switchable.prev" @click="() => --picState.i">
        <left-outlined style="font-size: 12px;" />
      </button>

      <a-input-number
        title="若确认请按 Enter"
        :class="picState.curr?.auditStatus ? SerialNumClassName(picState.curr.auditStatus) : ''"
        :min="1"
        :max="picState.list.length"
        :controls="false"
        size="small"
        :value="picState.i + 1"
        @pressEnter="event => picState.i = calcIndex(event)">
      </a-input-number>
      /
      <span>{{ picState.list.length }}</span>

      <button type="button" :disabled="!switchable.next" @click="() => ++picState.i">
        <right-outlined style="font-size: 12px;" />
      </button>
    </div>

    <template v-if="UserOpGte('审核')">
      <div class="judge">
        <button
          v-exist:task="'通过'"
          type="button"
          title="通过"
          @click="() => judge({ pass: true })">
          <svg t="1684295278493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26251" width="20" height="16"><path d="M918.64 238.64l-544 544C368.4 788.88 360.16 792 352 792s-16.4-3.12-22.64-9.36l-224-224a32.064 32.064 0 0 1 0-45.28 32.064 32.064 0 0 1 45.28 0L352 714.72l521.36-521.36c12.48-12.48 32.8-12.48 45.28 0s12.48 32.8 0 45.28z" p-id="26252"></path></svg>
        </button>
  
        <button
          v-exist:task="'驳回'"
          type="button"
          title="驳回"
          @click="() => handleReject()">
          <svg t="1684295042419" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24342" width="20" height="16"><path d="M811.974537 862.529445c-13.094226 0-26.187429-4.994758-36.177967-14.985296l-600.670505-600.623433c-19.9821-19.980054-19.983123-52.376904-0.00307-72.357981 19.980054-19.9821 52.377928-19.983123 72.357981-0.00307l600.670505 600.623433c19.9821 19.980054 19.983123 52.376904 0.00307 72.357981C838.164013 857.532641 825.06774 862.529445 811.974537 862.529445z" p-id="24343"></path><path d="M211.303009 862.529445c-13.096273 0-26.189476-4.995781-36.180014-14.987343-19.980054-19.981077-19.97903-52.377928 0.00307-72.357981l600.670505-600.623433c19.981077-19.980054 52.378951-19.978007 72.357981 0.00307 19.980054 19.981077 19.97903 52.377928-0.00307 72.357981l-600.670505 600.623433C237.491461 857.533664 224.396211 862.529445 211.303009 862.529445z" p-id="24344"></path></svg>
        </button>
  
        <button
          v-exist:task="'整包通过'"
          type="button"
          title="整包通过"
          @click="() => passAll()">
          <svg t="1684294726756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14351" width="20" height="16"><path d="M303.313 839.094h-119.25c-41.738 0-59.625-26.888-59.625-59.625V183.5c0-52.875 10.237-59.625 59.624-59.625h476.832c46.125 0 60.469 15.469 60.469 59.625v80.044c0 41.625 59.625 46.969 59.625 0v-79.875c0-87.863-28.407-119.194-120.207-119.194H183.894c-58.163 0-118.913 7.144-118.913 116.775V799.1a113.485 113.485 0 0 0 4.95 34.763 93.825 93.825 0 0 0 91.856 65.08c72.957 0.282 102.544 0 141.638 0 39.094 0 36.337-59.793-0.169-59.793z" p-id="14352"></path><path d="M244.025 242.844c-42.806 0-44.719 60.412 0 60.412h357.637c40.95 0 47.475-60.356 0-60.412H244.026z m96.019 178.706h-96.019c-42.806 0-44.719 60.412 0 60.412h96.019c40.95 0 47.475-60.356 0-60.412zM660.894 363.219A298.012 298.012 0 1 0 958.962 661.23c0.057-166.837-137.08-298.012-298.068-298.012z m0 536.456a238.444 238.444 0 1 1 238.443-238.444A239.231 239.231 0 0 1 660.894 899.9v-0.225z" p-id="14353"></path><path d="M765.237 557l-146.08 146.138-62.607-62.607c-5.963-11.925-29.813-11.925-41.737 0a28.8 28.8 0 0 0 0 41.738l83.53 83.475a28.8 28.8 0 0 0 41.738 0l166.894-166.95a29.531 29.531 0 0 0-41.681-41.738h-0.056z" p-id="14354"></path></svg>
        </button>  

        <button
          v-exist:task="'整包驳回'"
          type="button"
          title="整包驳回"
          @click="() => useJudgeModal({ action: '驳回', all: true })">
          <svg t="1684294894859" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17609" width="20" height="16"><path d="M319.255273 909.730909a34.909091 34.909091 0 0 1-34.909091 34.909091H174.266182a127.767273 127.767273 0 0 1-127.627637-127.627636V175.662545a127.720727 127.720727 0 0 1 127.627637-127.58109h502.225454a127.720727 127.720727 0 0 1 127.627637 127.58109v81.128728a34.909091 34.909091 0 0 1-69.818182 0V175.662545c0-31.883636-25.925818-57.762909-57.809455-57.762909H174.266182c-31.883636 0-57.809455 25.925818-57.809455 57.762909v641.303273c0 31.883636 25.925818 57.809455 57.809455 57.809455H284.392727a35.002182 35.002182 0 0 1 34.862546 34.955636zM239.941818 243.2a34.909091 34.909091 0 0 0 0 69.818182h378.600727a34.909091 34.909091 0 0 0 0-69.818182H239.941818z m65.675637 193.163636H239.941818a34.909091 34.909091 0 0 0 0 69.818182h65.675637a34.909091 34.909091 0 0 0 0-69.818182z m583.586909 451.211637c-56.925091 56.971636-132.654545 88.250182-213.178182 88.250182s-156.206545-31.325091-213.178182-88.250182a301.940364 301.940364 0 0 1 0-426.356364c56.971636-56.971636 132.608-88.250182 213.178182-88.250182s156.253091 31.325091 213.178182 88.250182c117.527273 117.620364 117.527273 308.875636 0 426.356364z m-49.384728-376.971637c-43.706182-43.706182-101.888-67.816727-163.84-67.816727s-120.087273 24.110545-163.793454 67.816727a232.029091 232.029091 0 0 0 0 327.633455c43.706182 43.706182 101.888 67.816727 163.793454 67.816727s120.087273-24.110545 163.84-67.816727a231.889455 231.889455 0 0 0 0-327.633455z m-44.916363 44.916364a34.909091 34.909091 0 0 0-49.384728 0l-69.538909 69.538909-69.538909-69.538909a34.909091 34.909091 0 1 0-49.384727 49.384727l69.538909 69.585455-69.538909 69.538909a34.909091 34.909091 0 0 0 49.338182 49.384727l69.538909-69.538909 69.538909 69.538909a34.862545 34.862545 0 1 0 49.338182-49.384727l-69.538909-69.538909 69.538909-69.585455a34.816 34.816 0 0 0 0.093091-49.384727z" p-id="17610"></path></svg>
        </button>
      </div>
    </template>
  </header>

  <judge-modal
    v-if="judgeModalProps.visible"
    v-model:visible="judgeModalProps.visible"
    :action="judgeModalProps.action"
    :all="judgeModalProps.all">
  </judge-modal>
</template>

<style>
.base-label > header {
  grid-area: header;
  position: relative;
  height: 50px;
  background: #fff;
  box-shadow: 0 1px 8px -4px rgba(0,0,0,.3);
}

.base-label > header button {
  border: 0;
  background: transparent;
}

.base-label > header button:disabled {
  color: rgba(0,0,0,.25);
  cursor: not-allowed;
}

.base-label > header .ant-input-number input { text-align: center; }

.kbdshortcut .ant-modal-header {
  padding-left: 16px;
  padding-right: 16px;
}

.kbdshortcut .ant-modal-body { padding: 12px; }
.kbdshortcut ul {
  overflow-y: auto;
  height: 252px;
}
.kbdshortcut li { display: flex; }
.kbdshortcut li:nth-child(even) { background-color: rgba(230,236,243,.34); }

.kbdshortcut li span { padding: .5em; }
.kbdshortcut li span:first-child { width: 11em; }
.kbdshortcut li span:nth-child(2) { flex: 1; }
.kbdshortcut li span:nth-child(3) { width: 13em; }

.kbdshortcut kbd {
  display: inline-block;
  padding: 2px 4px;
  border: 1px solid #b4b4b4;
  font-size: 0.85em;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  color: #333;
  background-color: #eee;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 0 0 rgba(255,255,255,.7) inset;
}

.base-label .top-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  display: flex;
  gap: .75em;
  height: 30px;
  margin-top: auto;
  margin-bottom: auto;
}

.base-label .top-left button { line-height: 1; }
.base-label .top-left svg { fill: #666; }

.base-label .back-btn {
  padding-left: 4px;
  padding-right: 4px;
}

.base-label .serial-num {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.base-label .serial-num > span {
  width: 1.6em;
  padding-left: .25em;
  padding-right: .25em;
  text-align: center;
}

.base-label .serial-num .ant-input-number {
  width: 32px;
  margin-right: 4px;
}

.base-label .serial-num .ant-input-number.pass { border-color: rgb(0,200,0); }
.base-label .serial-num .ant-input-number-focused.pass { box-shadow: 0 0 0 2px rgba(0,200,0,.2); }

.base-label .serial-num .ant-input-number.reject { border-color: rgb(200,0,0); }
.base-label .serial-num .ant-input-number-focused.reject { box-shadow: 0 0 0 2px rgba(200,0,0,.2); }


.base-label .serial-num button { height: 100%; }

.seq-label .judge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: .75em;
}

.base-label .judge button {
  height: 26px;
  padding-left: 2px;
  padding-right: 2px;
  border: 1px solid #333;
  line-height: 30px;
  border-radius: 4px;
}

.base-label .judge svg { fill: #333; }

.base-label .zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 0;
  width: max-content;
  height: max-content;
  border: 1px solid #666;
  border-radius: 4px;
}

.base-label .zoom .value {
  display: inline-block;
  width: 2.5em;
  text-align: center;
}

.base-label .zoom button { height: 24px; }
.base-label .zoom .ant-input-number { width: 36px; }
.base-label .zoom .ant-input-number input { padding: 0; }
</style>
